<template>
  <view class="moments-comments-wrapper">
    <view
      v-for="(comment, index) in comments"
      :key="index"
      class="comment-line"
    >
      <text class="comment-user">{{ comment.user }}：</text>
      <text class="comment-content">{{ comment.content }}</text>
    </view>
  </view>
</template>


<script setup>
defineProps(['comments']);
</script>

<style scoped>
	/* 外层统一背景区域 */
	.moments-comments-wrapper {
	  background-color: #f7f7f7;
	  border-radius: 12rpx;
	  padding: 20rpx;
	  margin-top: 10rpx;
	}
	
	/* 每一条评论的排布 */
	.comment-line {
	  font-size: 28rpx;
	  line-height: 40rpx;
	  color: #333;
	  margin-bottom: 12rpx;
	  word-break: break-word;
	}
	
	/* 用户名加颜色加粗 */
	.comment-user {
	  color: #0080ff;
	  font-weight: 500;
	}
	
	/* 评论内容普通样式 */
	.comment-content {
	  color: #333;
	}
	
	/* 去掉最后一条评论的 margin-bottom */
	.comment-line:last-child {
	  margin-bottom: 0;
	}


</style>
